<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hi</title>
  <style type="text/css">
    body {
      font-family: sans-serif;
    }

    embed {
      display: block;
    }

    textarea {
      width: 550px;
      height: 300px;
    }

    body {
      margin-top: 52px;
      background: #eee;
    }

    #quick_list li {
      text-decoration: underline;
      cursor: pointer;
      color: #333;
    }

    .box {
      vertical-align: top;
      background: white;
      padding: 8px;
      margin: 0px 8px;
      margin-bottom: 12px;
      display: inline-block;
      box-shadow: 0px 0px 8px rgba(0,0,0, 0.3);
    }

    .list {
      display: inline-block;
    }

    #editor .buttons {
      text-align: right;
    }

    .err {
      color: #931A1A;
    }

    canvas {
      background: #444;
    }

    #clear {
      float: left;
    }

  </style>
</head>
<body>
  <div id="game" class="box"> </div>

  <div id="editor" class="box">
    <textarea id="input"></textarea>
    <div class="buttons">
      <button id="clear">Clear</button>

      <span class="loading">Loading...</span>
      <select id="example_list"></select>
      <button id="run" disabled="disabled">Execute</button>
    </div>
  </div>

  <div class="list">
    <ul id="quick_list">
    </ul>
  </div>

  <pre id="output"></pre>

  <script type="text/javascript" src="js/aroma.js"></script>
  <script type="text/javascript">
     function get(url, callback) {
       var req = new XMLHttpRequest;
       req.onreadystatechange = function() {
         if (req.readyState == 4) callback(req.responseText);
       };
       req.open("GET", url, true);
       req.send(null);
     }

    (function() {
      $ = function(name) { return document.getElementById(name); }
      A = function(thing) { return Array.prototype.slice.apply(thing) };

      var example_dir = "examples/";
      var example_list = $("example_list");
      var quick_list = $("quick_list");
      var default_example = "rectangle.lua";

      function get_example_names(callback) {
        get(example_dir, function(html) {
          var fnames = html.match(/\b([\w._-]*?\.lua)\b/g);
          var set = {};
          callback(fnames.filter(function(name) {
            return !set[name] && (set[name] = true);
          }));
        });
      }

      window.load_example = function load_example(name, callback) {
        $("input").disabled = "disabled";
        get(example_dir + name, function(text) {
          $("input").value = text;
          $("input").removeAttribute("disabled");
          if (callback) callback();
        });

        A(example_list.querySelectorAll("option")).forEach(function(opt) {
          if (opt.innerHTML == name) {
            opt.selected = true;
          }
        });
      }

      get_example_names(function(names) {
        names.forEach(function(fname) {
          var n = document.createElement("option");
          n.innerHTML = fname;
          example_list.appendChild(n);
        });

        example_list.onchange = function() {
          var name = this.value;
          if (!name.match(/\.lua$/)) return;
          load_example(name);
        }

        // load_example(default_example);

        // create quick list
        names.forEach(function(name) {
          quick_list.innerHTML += "<li>" + name + "</li>";
        });

        quick_list.onclick = function(e) {
          load_example(e.target.innerHTML, function() {
            if (!$("run").disabled) run();
          });
        }
      });

      var output = $("output");

      function escape_html(str) {
        return str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
      }

      game = new Aroma($("game"), 300, 300, {
        loaded: function() {
          A(document.querySelectorAll(".loading")).map(function(e) {
            e.style.display = "none";
          });
          $("run").disabled = false;
        },
        std_out: function(str) {
          output.innerHTML += escape_html(str) + "\n";
        },
        std_err: function(str) {
          output.innerHTML += "<span class='err'>" +
            escape_html(str) + "</span>\n";
        }
      });

      function run() {
        var code = $("input").value;
        output.innerHTML = "";
        game.execute(code);
      }

      $("run").onclick = run;
      $("clear").onclick = function() {
        $("input").value = "";
        $("input").focus();
      };
      $("input").focus();
    })();
  </script>
</body>
</html>
